<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>试题</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/exam.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<header class="header">
	<a class="left_icon back_btn"></a>
	<h4 class="title">试题</h4>
</header>

<div class="swiper-container bg-w Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="examTest">
				
				<dl class="testMod">
					<dt class="titleMod">
						<h4 class="title">{{cur+1}}.<span class="type">【{{subject[cur].type == 0 ? '单选' : '其他'}}】</span>{{subject[cur].title}}</h4>
						<div class="photo" v-if="subject[cur].cover != null">
							<img :src="subject[cur].cover" />
						</div>
						<audio class="audio" v-if="subject[cur].audio" :src="subject[cur].audio" controls="controls"></audio>
					</dt>
					<dd class="optMod">
						<div class="option" v-for="(item,index) in subject[cur].sub">
							<label class="flex-row flex-top">
								<input :disabled="show" type="radio" :name="subject[cur].id" :value="index" v-model="select[cur]" />
								<div :class="index != subject[cur].correct && show ? 'error sel' : 'sel'" :data-type="index == subject[cur].correct && show ? '1' : '0'">
									<span>{{option[index]}}</span>
								</div>
								<span class="title flex-full">{{item.answer}}</span>
							</label>
							<div class="photo" v-if="item.cover != null">
								<img :src="item.cover" />
							</div>
							<audio class="audio" v-if="item.audio != null" :src="item.audio" controls="controls"></audio>
						</div>
					</dd>
				</dl>
				
				<div class="resBox top-line" v-if="show">
					<div class="res-head h5">
						你的答案：
						<template v-if="select[cur] != subject[cur].correct">
							<span style="color:#e90000">{{option[select[cur]]}}</span>
						</template>
						<template v-else>
							<span style="color:#51bbed">{{option[select[cur]]}}</span>
						</template>
						&nbsp;&nbsp;正确答案：{{option[subject[cur].correct]}}
					</div>
					<h5 class="name">答案解析：</h5>
					<div class="intro h5">
						{{subject[cur].intro}}
					</div>
				</div>
				
				
			</div>
			
		</div>
	</div>
</div>

<!--模拟题目数据-->
<script src="js/subject.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#Main",
	data:{
		subject:subject,
		cur:3,
		show:true,
		option:['A','B','C','D'],
		select:[0,0,0,3],
	},
	methods:{
		//提交
		submit:function(e){
			var target = e.currentTarget;
			if(!this.show){
				if(this.select.length-1 == this.cur){
					this.show = !this.show;
					if(this.cur < this.subject.length-1){
						target.innerText = '下一题';
					}else{
						target.innerText = '查看成绩';
					};
					if(this.subject[this.cur].correct == this.select[this.cur]){
						this.res.correct ++ ;
					}else{
						this.res.error ++ ;
					};
				}else{
					tip('请选择答案');
				};
			}else{
				if(this.cur < this.subject.length-1){
					this.show = !this.show;
					this.cur = this.cur + 1 ;
					this.swiper.setWrapperTranslate(0);
					this.swiper.update();
					target.innerText = '提交答案';
				}else{
					location.href = 'examRes.html';
				};
			};
		},
		//考试时间到
		endTest:function(){
			tip('考试时间已到，考试结束',function(){
				location.href = 'examRes.html';
			});
		},
	},
	mounted:function(){
		this.swiper = pullSwiper('#Main');
	},
});

</script>

</body>
</html>
